<!DOCTYPE html>
<html
  lang="en"
  xmlns:th="http://www.thymeleaf.org"
>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .position-item {
      width: 200px;
      margin: 10px;
      padding: 5px;
      border: cornflowerblue 1px solid;
      float: left;
      list-style: none;
      background: rgba(112, 158, 243, .5);
      border-radius: 4px;
    }

    .position-item-salary {
      float: right;
    }

    body {
      background-color: rgb(37, 94, 199);
      color: #fff !important;
      /* font-size: 14px; */
    }

    button {
      outline: none;
      background-color: rgba(66, 161, 133, .8);
      border: none;
      color: #fff;
      margin-right: 4px;
      padding: 0px 10px;
      border-radius: 2px;
      cursor: pointer;
    }

    .headline {
      font-size: 24px;
      height: 28px;
      line-height: 28px;
    }

    ul {
      margin-top: 4px;
    }
  </style>
</head>

<body>
  <form action="/buy">
    <div class="headline">
      用户ID：<span id="J_UserID"></span>
      &emsp;&emsp;用户名：<span id='J_UserName'></span>
     
    </div>
    <ul id="J_JobList">
    </ul>
  </form>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script>
  let data = [{ "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司1", "name": "热门职位1", "jobCode": "123456357834240", "industry": "行业1", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司2", "name": "热门职位2", "jobCode": "123456412360192", "industry": "行业2", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司3", "name": "热门职位3", "jobCode": "123456412360193", "industry": "行业3", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司4", "name": "热门职位4", "jobCode": "123456412360194", "industry": "行业4", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司5", "name": "热门职位5", "jobCode": "123456412360195", "industry": "行业5", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司6", "name": "热门职位6", "jobCode": "123456412360196", "industry": "行业6", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司7", "name": "热门职位7", "jobCode": "123456412360197", "industry": "行业7", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司8", "name": "热门职位8", "jobCode": "123456412360198", "industry": "行业8", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司9", "name": "热门职位9", "jobCode": "123456412360199", "industry": "行业9", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司10", "name": "热门职位10", "jobCode": "123456412360200", "industry": "行业10", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司11", "name": "热门职位11", "jobCode": "123456412360201", "industry": "行业11", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司12", "name": "热门职位12", "jobCode": "123456412360202", "industry": "行业12", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司13", "name": "热门职位13", "jobCode": "123456412360203", "industry": "行业13", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司14", "name": "热门职位14", "jobCode": "123456412360204", "industry": "行业14", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司15", "name": "热门职位15", "jobCode": "123456412360205", "industry": "行业15", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司16", "name": "热门职位16", "jobCode": "123456412360206", "industry": "行业16", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司17", "name": "热门职位17", "jobCode": "123456416554496", "industry": "行业17", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司18", "name": "热门职位18", "jobCode": "123456416554497", "industry": "行业18", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司19", "name": "热门职位19", "jobCode": "123456416554498", "industry": "行业19", "tag": "Java、后端", "educationRequirement": "本科" }, { "salaryRange": "20K~30K", "workingYearsRequirement": "3-5", "companyName": "热门公司20", "name": "热门职位20", "jobCode": "123456416554499", "industry": "行业20", "tag": "Java、后端", "educationRequirement": "本科" }];
  let arr = [];
  for (let i = 0; i < data.length; i++) {
    let item = data[i];

    let str = '<li data-job-code="' + item.jobCode + '" class="position-item">'
      + '<div>'
      + '<span>' + item.name + '</span>'
      + '<span class="position-item-salary">' + item.salaryRange + '</span>'
      + '</div>'
      + '<div>'
      + '<span>' + item.workingYearsRequirement + '</span>'
      + '<span>' + item.educationRequirement + '</span>'
      + '</div>'
      + '<div>'
      + '<span>' + item.tag + '</span>'
      + '</div>'
      + '<div>'
      + '<span>' + item.companyName + '</span>'
      + '</div>'
      + '<div>'
      + '<span>' + item.industry + '</span>'
      + '</div>'
      + '<div>'
      + '<button type="button" click-type="click">点击</button>'
      + '<button type="button" click-type="job_collect">收藏</button>'
      + '<button type="button" click-type="cv_send">投简历</button>'
      + '<button type="button" click-type="cv_upload">上传简历</button>'
      + '</div>'
      + '</li>';

    arr.push(str);
  }

  $('#J_JobList').html(arr.join('\n'));
  $('#J_UserID').html('10001');
  $('#J_UserName').html('袁霄');
  $('button').on('click', function () {
    let url = '/kafka/clickPositionByUser';
    let actTime = moment().format('YYYY-MM-DD HH:mm:ss');
    let action = $(this).attr('click-type');
    let jobCode = $(this).parents('li').attr('data-job-code');
    let obj = {
      user_id: $('#J_UserID').html(),
      user_name: $('#J_UserName').html(),
      act_time: actTime,
      action: action,
      jobCode: jobCode
    };
    $.post(url, obj);
  })
</script>

</html>